<template>
  <div>
  <el-tabs type="border-card" class="leader-area">
    <el-tab-pane label="Lab Director">
      <LeaderInfoCard 
        v-for="(i,index) in leader"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        :email    = "i.email"
        :degree    = "i.degree"
        :synopsis = "i.synopsis"
        :imgUrl   = "i.imgUrl"
      />

    </el-tab-pane>
  </el-tabs>


  <el-tabs  v-model="activeName" type="border-card" class="member-area" stretch>
      <el-tab-pane label="Current Members" name="Former">
        <div style="text-align: center;">
          <CurrentMember />
        </div>
      </el-tab-pane>

      <el-tab-pane label="Alumni" name="Alumni">
        <div style="text-align: center;">
          <Alumni />
        </div>
      </el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
// import TeacherCard from '../components/People/TeacherCard.vue'
import LeaderInfoCard from '../components/People/LeaderInfoCard.vue'
import CurrentMember from '../components/People/CurrentMember.vue'
import Alumni from '../components/People/Alumni.vue'



export default {
  components: { LeaderInfoCard,CurrentMember,Alumni },
  data() {
    return {
      activeName: "Former",
      leader: []
    };
  },
  created() {
    this.$http.get('/json/PeopleLeader.json').then((response) => {
      // console.log(response);
      this.leader = response.data.leader;
    });

  }



};
</script>

<style lang="less" scoped>
.leader-area{
  margin-bottom: 20px; text-align: center;
  .el-tabs { min-height: 750px; }
  /deep/.el-tabs__nav{ padding-left: 45%; }
}

.member-area{
  .el-tabs { min-height: 750px; }
  // /deep/.el-tabs__nav{ transform: translateX(150%)!important; text-align: center !important; }
  /deep/.el-tabs__nav-scroll{ width: 50%!important;margin: 0 auto!important; }
}
  /deep/.el-tabs__item{font-weight: bold;font-size: 20px;}
</style>
